import { createRouter, createWebHashHistory, RouteLocationNormalized, RouteRecordRaw } from 'vue-router' // 如果是hash模式就把createWebHistory改为createWebHashHistory
import Full from '../layout/Full.vue';
import LayoutManager from '../layout/LayoutManager';
import $store from '../store';
import { useGlobalMessage } from '../utils/global';

const routes: Array<RouteRecordRaw & { [props: string]: any }> = [
  {
    path: '/',
    name: 'Home',
    redirect: '/mall',
  },
  {
    path: '/mall',
    name: 'mall',
    components: {
      header: () => import('../components/common/Header.vue'),
      content: () => import('../views/mall.vue'),
      footer: () => import('../components/common/Footer.vue'),
    },
    meta: {
      title: '商城首页',
    }
  },
  {
    path: '/login',
    name: 'login',
    components: {
      content: () => import('../views/login.vue'),
    },
    meta: {
      title: '登录账号',
      beforeEnter: (to: RouteLocationNormalized, from: RouteLocationNormalized) => {
        if ($store.getters.getUserInfo) {
          useGlobalMessage().success('您已登录，Cloud米米欢迎您');
          return false;
        }
        return true;
      },
      layout: Full,
    }
  },
  {
    path: '/product/:id',
    name: 'product',
    components: {
      header: () => import('../components/common/Header.vue'),
      content: () => import('../views/product-detail.vue'),
      footer: () => import('../components/common/Footer.vue'),
    },
    meta: {
      title: '商品详情',
    }
  },
  {
    path: '/category/:cid',
    name: 'category',
    components: {
      header: () => import('../components/common/Header.vue'),
      content: () => import('../views/category.vue'),
      footer: () => import('../components/common/Footer.vue'),
    },
    meta: {
      title: '商品分类',
    }
  },
  {
    path: '/cart',
    name: 'cart',
    components: {
      header: () => import('../components/common/Header.vue'),
      content: () => import('../views/cart.vue'),
      footer: () => import('../components/common/Footer.vue'),
    },
    meta: {
      title: '购物车',
      needLogin: true,
    }
  },
  {
    path: '/search/:keyword?',
    name: 'search',
    components: {
      header: () => import('../components/common/Header.vue'),
      content: () => import('../views/search.vue'),
      footer: () => import('../components/common/Footer.vue'),
    },
    meta: {
      title: '商品分类',
    }
  },
  {
    path: '/order',
    name: 'order',
    components: {
      header: () => import('../components/common/Header.vue'),
      content: () => import('../views/order.vue'),
      footer: () => import('../components/common/Footer.vue'),
    },
    meta: {
      title: '我的订单'
    }
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router;
